import { Button, Form, Input, Table, Space, Flex } from 'antd'
import { useEffect, useState, useCallback } from 'react'
import { findAllRole, deleteRole } from '@/api/role'
import RoleForm from './RoleForm'
import useConfirmModal from '@/hooks/useConfirmModal'
import FormButton from '@/components/formButton'

const Role = () => {
  const [dataSource, setDataSource] = useState([])
  const [roleModalVisible, setRoleModalVisible] = useState(false)
  const [modalTitle, setModalTitle] = useState('')
  const [roleId, setRoleId] = useState('')
  const confirmModal = useConfirmModal()

  const handleOpenModal = (title, role_id) => {
    setModalTitle(title)
    setRoleId(role_id)
    setRoleModalVisible(true)
  }

  const getRoleList = useCallback(async () => {
    const { data } = await findAllRole()
    setDataSource(data)
  }, [])

  const handleDeleteRole = (id) => {
    confirmModal(async () => {
      await deleteRole({ id })
      getRoleList()
    })
  }

  useEffect(() => {
    getRoleList()
  }, [getRoleList])

  const columns = [
    {
      title: '序号',
      dataIndex: 'role_id',
      width: 50,
      align: 'center',
      render: (text, record, index) => {
        return index + 1
      }
    },
    {
      title: '角色名称',
      dataIndex: 'name',
      align: 'center'
    },
    {
      title: '角色编码',
      dataIndex: 'code',
      align: 'center'
    },
    {
      title: '角色描述',
      dataIndex: 'description',
      align: 'center'
    },
    {
      title: '创建人',
      dataIndex: 'created_by',
      align: 'center'
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      align: 'center'
    },
    {
      title: '最后更新人',
      dataIndex: 'updated_by',
      align: 'center'
    },
    {
      title: '最后更新时间',
      dataIndex: 'updated_at',
      align: 'center'
    },
    {
      title: '操作',
      fixed: 'right',
      width: 200,
      align: 'center',
      render: (text, record) => {
        const { role_id } = record
        return <Flex gap="small" justify="center">
          <Button color="blue" variant='filled' size="small" onClick={() => handleOpenModal('编辑角色', role_id)}>编辑</Button>
          <Button color="red" variant='filled' size="small" onClick={() => handleDeleteRole(role_id)}>删除</Button>
          <Button color="green" variant='filled' size="small" onClick={() => handleOpenModal('角色详情', role_id)}>详情</Button>
        </Flex>
      }
    }
  ]

  const onFinish = (values) => {
    console.log('Success:', values)
  }

  const onOk = () => {
    getRoleList()
    setRoleModalVisible(false)
  }

  const exportData = () => {
    console.log('导出')
  }

  const importData = () => {
    console.log('导入')
  }

  const downloadData = () => {
    console.log('下载')
  }

  return <>
    <div>
      <Space direction="vertical" size="middle">
        <Form layout="inline" onFinish={onFinish}>
          <Form.Item
            label="角色名称"
            name="name"
          >
            <Input placeholder="角色名称" />
          </Form.Item>

          <Form.Item>
            <FormButton
              search={getRoleList}
              add={() => handleOpenModal('新增角色')}
              export={exportData}
              import={importData}
              download={downloadData}
            />
          </Form.Item>
        </Form>

        <Table
          bordered
          columns={columns}
          dataSource={dataSource}
          rowKey="role_id" size="small"
          scroll={{ x: 'max-content' }}/>
      </Space>

      {
        roleModalVisible &&
        <RoleForm
          title={modalTitle}
          role_id={roleId}
          visible={roleModalVisible}
          onCancel={() => setRoleModalVisible(false)}
          onOk={onOk}
        />
      }
    </div>
  </>
}

export default Role